<template>
    <div>
        <bread :list="['权限管理', '用户管理']" />
        <div class="container">
            <div class="mb-20 mt-20">
                <el-button type="primary" class="mr-10" @click="dialogShow(DialogType.Insert)">新增</el-button>
            </div>
            <el-table
                v-loading="conf.table.loading"
                :data="conf.table.data"
                border
                class="fz-14"
                ref="multipleTable"
                header-cell-class-name="table-header"
                row-key="id"
                v-model:default-expand-all="conf.table.expandall"
                empty-text="暂无数据"
                :highlight-current-row="true"
            >
                <el-table-column prop="name" label="名称" min-width="200"></el-table-column>
                <el-table-column prop="account" label="账号" min-width="200"></el-table-column>
                <el-table-column label="状态" align="center" width="100">
                    <template #default="{ row }">
                        <el-tag :type="row.status ? 'success' : 'danger'">{{ row.status ? '启用' : '禁用' }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="手机号" width="150"></el-table-column>
                <el-table-column label="注册时间" align="center" width="180">
                    <template #default="{ row }">
                        {{ new Date(row.createTime).Format() }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template #default="{ row }">
                        <el-button
                            link
                            type="warning"
                            @click="dialogShow(DialogType.Update, row)"
                            v-if="row.id !== '0'"
                        >
                            编辑
                        </el-button>
                        <el-popconfirm
                            :title="`确定要删除【${row.name}】吗?`"
                            @confirm="dialogSubmitRemove(row.id)"
                            v-if="row.id !== '0'"
                        >
                            <template #reference>
                                <el-button link type="danger" v-user="'/auth/user/remove'">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div class="row justify-end mt-20 mb-20">
                <el-pagination
                    v-model:current-page="conf.table.page.pageNum"
                    :page-size="conf.table.page.pageSize"
                    :pager-count="7"
                    layout="prev, pager, next"
                    :total="conf.table.page.total"
                    @current-change="getTableData"
                    v-if="conf.table.page.total > conf.table.page.pageSize"
                />
            </div>
        </div>
        <el-dialog v-model="conf.dialog.show" :title="conf.dialog.title" :close-on-click-modal="false">
            <el-form ref="ruleFormRef" :model="conf.dialog.form" :rules="conf.dialog.rules">
                <el-form-item label="名称" :label-width="conf.dialog.labelWidth" prop="name">
                    <el-input v-model="conf.dialog.form.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="状态" :label-width="conf.dialog.labelWidth">
                    <el-switch v-model="conf.dialog.form.status" />
                </el-form-item>
                <el-form-item label="账号" :label-width="conf.dialog.labelWidth" prop="account">
                    <el-input v-model="conf.dialog.form.account" autocomplete="off" />
                </el-form-item>
                <el-form-item
                    label="密码"
                    :label-width="conf.dialog.labelWidth"
                    prop="password"
                    v-if="conf.dialog.type === DialogType.Insert"
                >
                    <el-input v-model="conf.dialog.form.password" autocomplete="off" />
                </el-form-item>
                <el-form-item
                    label="手机号"
                    :label-width="conf.dialog.labelWidth"
                    v-if="conf.dialog.type === DialogType.Insert"
                >
                    <el-input v-model="conf.dialog.form.phone" autocomplete="off" />
                </el-form-item>
                <el-form-item label="简介" :label-width="conf.dialog.labelWidth">
                    <el-input v-model="conf.dialog.form.desc" autocomplete="off" />
                </el-form-item>
                <el-form-item label="角色列表" :label-width="conf.dialog.labelWidth" prop="roleList">
                    <el-tree-select
                        v-model="conf.dialog.form.roleList"
                        :data="conf.roleList"
                        row-key="id"
                        node-key="id"
                        multiple
                        :render-after-expand="false"
                        show-checkbox
                        check-strictly
                        check-on-click-node
                        :props="{ label: 'title', children: 'children' }"
                        style="width: 100%"
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="conf.dialog.show = false">关闭</el-button>
                    <el-button type="primary" @click="dialogSubmit" :loading="conf.dialog.loading">提交</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { DialogType } from '~/types/Enum'
import { index } from '.'

const { conf, dialogSubmit, dialogShow, ruleFormRef, dialogSubmitRemove, getTableData } = index()
</script>

<style lang="less" scoped></style>
